<!--
 * @Author: 黄达全
 * @Date: 2024-08-08 21:29:11
 * @LastEditTime: 2024-08-09 21:32:02
-->
<script lang="ts" setup>
import myDialog from "./dialog.vue"
import {ref,nextTick} from "vue"
import imagePage from "@/views/image/list.vue"
import type {ImagePageItem} from "@/common/type"

const width=document.documentElement.clientWidth*0.85
const height=document.documentElement.clientHeight - 25*2 - 16*2 - 40 - 48;

const {avatarUrl} =defineProps({
    multiple:{
        type:Boolean,
        default:false
    },
    avatarUrl:{
        type:String,
        default:""
    }
})

const dialogRef=ref()
const imagePageRef=ref()
// 打开图片弹窗
const openImageDrawer = () => {
    dialogRef.value.open()
    nextTick(()=>{
        imagePageRef.value.init_checked()
    })
}
// 获取图片数据
type ImagePageItem_Check = ImagePageItem & { checked: boolean }
const selectedImageList = ref<ImagePageItem_Check[]>([])

// 选择图片
const emits=defineEmits(["selectImage"])
const selectImage = () => {
    emits("selectImage",selectedImageList.value)
    dialogRef.value.close()
}

const init_checked=()=>{
    selectedImageList.value=[]
}

defineExpose({
    init_checked
})


</script>

<template>
    <div class="imgList">
        <img class="img" v-if="avatarUrl&&selectedImageList.length==0" :src="avatarUrl"/>
        <img class="img" v-for="item in selectedImageList" :key="item.id" :src="item.url" />
        <div class="upload" @click="openImageDrawer">
            <el-icon :size="35" color="#ccc">
                <el-icon-plus />
            </el-icon>
        </div>
    </div>
    <my-dialog title="图片选择" :width="width" ref="dialogRef" @submit="selectImage">
            <template #body>
                <div class="imageDialog" :style="{height:height+'px'}">
                <imagePage :is_dialog="true" :height="height" :multiple="multiple" v-model="selectedImageList" ref="imagePageRef"/>
                </div>
            </template>
        </my-dialog>
</template>

<style lang="scss" scoped>
.imgList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;

    .img {
        width: 110px;
        height: 110px;
        border-radius: 5px;
        transition: 0.2s;
        &:hover{
            filter: blur(2px);
        }
    }

    .upload {
        width: 110px;
        height: 110px;
        border: 1px dashed #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        transition: 0.2s;

        &:hover {
            border: 1px dashed var(--primary-theme-color);
            background-color: #f5f7fa;
        }
    }
}

.dark .upload{
    &:hover {
            border: 1px dashed #f5f7fa;
            background-color: #333;
        }
}

.imageDialog{
    width: 100%;
}
</style>
